<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form isheader" v-show="headerShow" style="height: 60px">
        <a-form size="small" :model="query" layout="inline">
          <a-form-item label="客户" prop="customName">
            <a-input
              allow-clear
              :style="{ width: '200px' }"
              class="bacClass"
              v-model="query.customName"
            />
          </a-form-item>
          <a-form-item label="织布单号" prop="planOrderCode">
            <a-input
              allow-clear
              :style="{ width: '200px' }"
              class="bacClass"
              v-model="query.planOrderCode"
            />
          </a-form-item>
          <a-form-item label="坯布编号" prop="greyCode">
            <a-input
              allow-clear
              :style="{ width: '200px' }"
              class="bacClass"
              v-model="query.greyCode"
            />
          </a-form-item>
          <a-form-item v-if="activeNme == '1'" label="布笼" prop="shelveName">
            <a-input
              allow-clear
              :style="{ width: '200px' }"
              class="bacClass"
              v-model="query.shelveName"
            />
          </a-form-item>
          <a-form-item v-if="activeNme == '4'" label="布笼" prop="shelveName">
            <a-input
              allow-clear
              :style="{ width: '200px' }"
              class="bacClass"
              v-model="query.shelveName"
            />
          </a-form-item>
          <!-- 差字段 -->
          <a-form-item
            v-if="activeNme == '3' || activeNme == '1'"
            label="条形码"
            prop="clothfiyCode"
          >
            <a-input
              allow-clear
              :style="{ width: '180px' }"
              class="bacClass"
              v-model="query.clothfiyCode"
            />
          </a-form-item>
          <a-form-item
            v-if="activeNme == '2'"
            label="客户订单号"
            label-width="90px"
            prop="customOrderCode"
          >
            <a-input
              allow-clear
              :style="{ width: '200px' }"
              class="bacClass"
              v-model="query.customOrderCode"
            />
          </a-form-item>
          <CorporateSectorCascader
            v-if="activeNme == '1' || activeNme == '2'"
            ref="cascaderRef"
            :configCascader="configCascader2"
            @changeCascader="changeCascader2"
          />

          <a-form-item
            label="仓库"
            label-col-flex="65px"
            v-if="activeNme == '1' || activeNme == '2'"
          >
            <a-select
              popup-container="html"
              class="bacClass"
              :style="{ width: '230px' }"
              v-model="query.warehouseId"
              :disabled="query.companyId == ''"
              allow-clear
            >
              <a-option v-for="item in pageData.inShelveList2" :key="item.id" :value="item.id">
                {{ item.warehouseName }}
              </a-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up
            v-if="headerShow"
            @click="headerShow = false"
            :strokeWidth="2"
            :size="18"
          />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
      <div class="my-tool-bar" style="margin-bottom: 5px">
        <a-space>
          <el-button @click="getList" type="primary" :icon="Search">查询</el-button>
          <el-button v-if="activeNme == '1'" plain @click="splitAdjustment('split')"
            >拆分</el-button
          >
          <el-button v-if="activeNme == '1'" plain @click="splitAdjustment('Adjustment')"
            >调整</el-button
          >
          <el-button
            v-if="activeNme == '2'"
            :icon="Download"
            plain
            @click="EXELTABLE(tableColumns1, pageData.dataList, '坯布仓库存明细')"
            >导出</el-button
          >
          <el-button v-if="activeNme == '3'" :icon="Printer" plain>条码打印</el-button>
        </a-space>
      </div>
    </template>
    <!-- <div style="background-color: #f0f2f5; height: 10px"></div> -->
    <template #pageTabel>
      <a-tabs :lazy-load="true" @change="activeChange" justify :default-active-key="activeNme">
        <a-tab-pane title="明细" key="1">
          <AgGridVuesCopys
            :rowHeight="33"
            :headerHeight="33"
            :suppressCopyRowsToClipboard="true"
            :suppressDragLeaveHidesColumns="true"
            v-loading="loadingElplus"
            rowSelection="multiple"
            @grid-ready="gridReady"
            style="height: calc(100% - 45px)"
            @columnResized="onColumnResized"
            @columnMoved="onColumnMoved"
            @columnVisible="onColumnVisible"
            :defaultColDef="defaultColDef"
            class="ag-theme-alpine"
            :rowData="pageData.dataList"
            :columnDefs="tableColumns"
            :localeText="localeText1"
          >
          </AgGridVuesCopys>
          <paginationCopys
            :total="pageData.total"
            show-total
            show-jumper
            show-page-size
            @change="PageSize"
            @page-size-change="changeSize"
            style="justify-content: center"
            :page-size="query.size"
            :current="query.page"
            :page-size-options="pagingList1"
          />
        </a-tab-pane>
        <a-tab-pane title="汇总" key="2">
          <!-- <encapsulation-agrid :configaggrid="configaggrid"></encapsulation-agrid> -->
          <AgGridVuesCopys
            :rowHeight="33"
            :headerHeight="33"
            :suppressCopyRowsToClipboard="true"
            :suppressDragLeaveHidesColumns="true"
            v-loading="loadingElplus"
            rowSelection="multiple"
            @grid-ready="gridReady1"
            style="height: calc(100% - 45px)"
            @columnResized="onColumnResized2"
            @columnMoved="onColumnMoved2"
            @columnVisible="onColumnVisible2"
            :defaultColDef="defaultColDef"
            class="ag-theme-alpine"
            :rowData="pageData.dataList"
            :columnDefs="tableColumns1"
            :localeText="localeText1"
          >
          </AgGridVuesCopys>
          <paginationCopys
            :total="pageData.total"
            show-total
            show-jumper
            show-page-size
            @change="PageSize"
            @page-size-change="changeSize"
            style="justify-content: center"
            :page-size="query.size"
            :current="query.page"
            :page-size-options="pagingList1"
          />
        </a-tab-pane>
        <a-tab-pane title="拆分明细" key="3">
          <AgGridVuesCopys
            :rowHeight="33"
            :headerHeight="33"
            :suppressCopyRowsToClipboard="true"
            :suppressDragLeaveHidesColumns="true"
            v-loading="loadingElplus"
            rowSelection="multiple"
            @grid-ready="gridReady2"
            style="height: calc(100% - 45px)"
            @columnResized="onColumnResized3"
            @columnMoved="onColumnMoved3"
            @columnVisible="onColumnVisible3"
            :defaultColDef="defaultColDef"
            class="ag-theme-alpine"
            :rowData="pageData.dataList"
            :columnDefs="tableColumns"
            :localeText="localeText1"
          >
          </AgGridVuesCopys>
          <paginationCopys
            :total="pageData.total"
            show-total
            show-jumper
            show-page-size
            @change="PageSize"
            @page-size-change="changeSize"
            style="justify-content: center"
            :page-size="query.size"
            :current="query.page"
            :page-size-options="pagingList1"
          />
        </a-tab-pane>
        <a-tab-pane title="调整记录" key="4">
          <AgGridVuesCopys
            :rowHeight="33"
            :headerHeight="33"
            :suppressCopyRowsToClipboard="true"
            :suppressDragLeaveHidesColumns="true"
            v-loading="loadingElplus"
            rowSelection="multiple"
            @grid-ready="gridReady3"
            style="height: calc(100% - 45px)"
            @columnResized="onColumnResized4"
            @columnMoved="onColumnMoved4"
            @columnVisible="onColumnVisible4"
            :defaultColDef="defaultColDef"
            class="ag-theme-alpine"
            :rowData="pageData.dataList"
            :columnDefs="tableColumns2"
            :localeText="localeText1"
          >
          </AgGridVuesCopys>
          <paginationCopys
            :total="pageData.total"
            show-total
            show-jumper
            show-page-size
            @change="PageSize"
            @page-size-change="changeSize"
            style="justify-content: center"
            :page-size="query.size"
            :current="query.page"
            :page-size-options="pagingList1"
          />
        </a-tab-pane>
      </a-tabs>
    </template>
    <el-dialog
      style="width: 500px"
      v-model="pageData.dialogFormVisible"
      :title="pageData.pageType == 'split' ? '拆分' : '调整'"
      v-loading="loadingElplus1"
    >
      <el-form :model="form">
        <el-form-item v-if="pageData.pageType == 'split'" label="条形码:" label-width="80px">
          <span>{{ form.clothfiyCode }}</span>
        </el-form-item>
        <el-form-item v-if="pageData.pageType == 'split'" label="原重:" label-width="80px">
          <span>{{ form.formerWeight }}</span>
        </el-form-item>
        <el-form-item v-if="pageData.pageType == 'split'" label="拆分重量:" label-width="80px">
          <el-input v-model="form.splitWeight" />
        </el-form-item>
        <el-form-item v-if="pageData.pageType == 'Adjustment'" label="匹数:" label-width="80px">
          <span>{{ form.horseNo }}</span>
        </el-form-item>
        <el-form-item v-if="pageData.pageType == 'Adjustment'" label="原布笼:" label-width="80px">
          <span>{{ form.shelveName }}</span>
        </el-form-item>
        <el-form-item v-if="pageData.pageType == 'Adjustment'" label="调整布笼:" label-width="80px">
          <el-select
            v-model="form.inShelveId"
            @focus="focusShelve"
            filterable
            placeholder="选择调整布笼"
          >
            <el-option
              v-for="item in pageData.inShelveList"
              :key="item.shelveId"
              :label="item.shelveName"
              :value="item.shelveId"
              :loading="pageData.loading"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="pageData.dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="save"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </pageTabelLayout>
</template>

<script lang="ts" setup>
  //表格
  

  //表格数据处理
  import { localeText } from '@/api/aggridZw'

  //分页列表
  import { pagingList } from '@/api/paging'

  // 引入element提示

  import { ElMessage } from 'element-plus'

  //引入封装post
  import { post } from '@/api/http'
  import { tableColumns, tableColumns1, tableColumns2 } from './index'

  //引入导出方法
  import { EXPORTEXEL, EXELTABLE } from '@/utils/exportEXCEL'
  import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
  import { Search, Download, Printer } from '@element-plus/icons-vue'
  import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'
  import { saveOrUpdateGridState as saveOrUpdateGridState02 } from '@/hooks/useGridState'
  import { saveOrUpdateGridState as saveOrUpdateGridState03 } from '@/hooks/useGridState'
  import { saveOrUpdateGridState as saveOrUpdateGridState04 } from '@/hooks/useGridState'
  import setTableTotalRow from '@/utils/setTableTotalRow.ts'
  interface Pagein {
    btnList: any
    dataList: any
    dialogFormVisible: boolean
    pageType: string
    inShelveList: any
    loading: boolean
    total: any
    inShelveList2: any
  }

  const headerShow = ref(true)

  // 跟请求参数无关的放这里
  let pageData = reactive<Pagein>({
    btnList: ['查询', '导出'], // 按钮列表
    dataList: [],
    dialogFormVisible: false,
    pageType: '',
    inShelveList: [],
    loading: false,
    total: 0,
    inShelveList2: [],
  })
  interface Querin {
    page: any
    size: any
    clothfiyCode: Number | String
    customOrderCode: Number | String
    greyCode: Number | String
    customName: Number | String
    planOrderCode: Number | String
    outShelveName: Number | String
    inShelveName: Number | String
    companyId: Number | String
    warehouseId: Number | String
    warehouseTypeName: String
    shelveName: any
  }
  //getlist初始化接口参数
  let query = reactive<Querin>({
    page: 1,
    size: 10,
    customName: '',
    clothfiyCode: '',
    customOrderCode: '',
    outShelveName: '',
    inShelveName: '',
    shelveName: '',
    planOrderCode: '',
    greyCode: '',
    companyId: '',
    warehouseId: '',
    warehouseTypeName: '次布仓',
  })

  // 分页数组条数
  const pagingList1: any = ref(pagingList)

  //tabs选中的值
  let activeNme = ref<string>('1')

  // 表格准备事件
  const gridOption = ref()
  const gridOption1 = ref()
  const gridOption2 = ref()
  const gridOption3 = ref()
  const colState = ref()
  const colState2 = ref()
  const colState3 = ref()
  const colState4 = ref()
  const gridReady = (params: any) => {
    gridOption.value = params.api
    colState.value = params.columnApi
  }
  const gridReady1 = (params: any) => {
    gridOption1.value = params.api
    colState2.value = params.columnApi
  }
  const gridReady2 = (params: any) => {
    gridOption2.value = params.api
    colState3.value = params.columnApi
  }
  const gridReady3 = (params: any) => {
    gridOption3.value = params.api
    colState4.value = params.columnApi
  }
  //表格配置
  const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
    //flex: 1
  }

  const localeText1: any = ref(localeText)

  // 分页事件
  const PageSize = (val: any) => {
    query.page = val
    getList()
  }

  const changeSize = (val: any) => {
    query.size = val
    getList()
  }
  // loding.....
  let loadingElplus = ref<boolean>(false)
  let loadingElplus1 = ref<boolean>(false)
  let cascaderRef = ref('')

  const activeChange = (val: any) => {
    pageData.total = 0
    query.page = 1
    query.size = 10
    query.customName = ''
    query.clothfiyCode = ''
    query.customOrderCode = ''
    query.outShelveName = ''
    query.inShelveName = ''
    query.planOrderCode = ''
    query.greyCode = ''
    query.companyId = ''
    query.warehouseId = ''
    activeNme.value = val
    if (val == '1' || val == '2') {
      let data = {
        sectorId: '',
        sectorLabel: '',
        corporateId: '',
        corporateLabel: '',
      }
      nextTick(() => {
        cascaderRef.value.parentComponent(data)
      })
    }
    getList()
  }
  let form = ref<any>({
    id: '',
    splitWeight: '',
  })
  const focusShelve = async () => {
    try {
      pageData.loading = true
      let { code, data, message } = await post({
        url: 'wms/shelve/getShelveOption',
        data: { warehouseId: form.value.warehouseId },
      })
      if (code == 200) {
        pageData.inShelveList = data
        pageData.loading = false
        return
      }
      ElMessage.error(message)
    } finally {
      pageData.loading = false
    }
  }
  const splitAdjustment = (type: string) => {
    let selsetionList = gridOption.value.getSelectedRows()
    if (selsetionList.length == 0) {
      ElMessage.warning('请选择您的单据')
      return
    }
    if (type == 'split') {
      form.value = {}
      form.value.splitWeight = ''
      form.value.clothfiyCode = selsetionList[0].clothfiyCode
      form.value.formerWeight = selsetionList[0].weight
      form.value.id = selsetionList[0].id
    } else {
      let condition = selsetionList.every(
        (item: any) => item.shelveId === selsetionList[0].shelveId          
      )
      if (!condition) {
        ElMessage.warning('请选择同一个布笼的单据')
        return
      }
      nextTick(() => {
        form.value = {}
        form.value.inShelveId = ''
        form.value.outCompanyId = selsetionList[0].companyId
        form.value.inCompanyId = selsetionList[0].companyId
        form.value.outWarehouseId = selsetionList[0].warehouseId
        form.value.inWarehouseId = selsetionList[0].warehouseId
        form.value.outAreaId = selsetionList[0].areaId
        form.value.inAreaId = selsetionList[0].areaId
        form.value.stockId = selsetionList[0].id
        form.value.outShelveId = selsetionList[0].shelveId
        form.value.greyCode = selsetionList[0].greyCode
        form.value.clothfiyId = selsetionList[0].clothfiyId
        form.value.greyName = selsetionList[0].greyName
        form.value.greyBatchNo = selsetionList[0].greyBatchNo
        form.value.planOrderCode = selsetionList[0].planOrderCode
        form.value.horseNo = selsetionList[0].horseNo
        form.value.machineCode = selsetionList[0].machineCode
        form.value.remark = selsetionList[0].remark
        form.value.warehouseId = selsetionList[0].warehouseId
        form.value.shelveName = selsetionList[0].shelveName
        form.value.clothfiyCode = selsetionList[0].clothfiyCode
        form.value.customName = selsetionList[0].customName
        form.value.weight = selsetionList[0].weight
      })
    }
    pageData.pageType = type
    pageData.dialogFormVisible = true
  }
  const changeCascader2 = (data: any) => {
    const { corporateId, corporateLabel } = data
    query.companyId = corporateId
    focusShelve2()
  }
  const focusShelve2 = async () => {
    try {
      pageData.loading = true
      let { code, data, message } = await post({
        url: 'wms/warehouse/getWarehouseByPara',
        data: { firmId: query.companyId, warehouseTypeName: '次布仓', virtuallyState: 0 },
      })
      if (code == 200) {
        pageData.inShelveList2 = data
        pageData.loading = false
        return
      }
      ElMessage.error(message)
    } finally {
      pageData.loading = false
    }
  }
  const configCascader2 = ref<{}>({
    corporateWidth: '200px', //公司宽度
    size: 'small', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '公司', //公司label
    cascaderShow: 'sector', //配置部门不显示
  })
  const save = async () => {
    try {
      loadingElplus1.value = true
      let { code, message } = await post({
        url:
          pageData.pageType == 'split'
            ? '/wms/GreyStock/stockSplit'
            : 'wms/GreyStockAdjust/stockAdjust',
        data: pageData.pageType == 'split' ? form.value : [form.value],
      })
      if (code == 200) {
        getList()
        pageData.dialogFormVisible = false
        loadingElplus1.value = false
        ElMessage.success(pageData.pageType == 'split' ? '拆分成功' : '调整成功')
        return
      }
      ElMessage.error(message)
    } finally {
      loadingElplus1.value = false
    }
  }
  //获取数据
  const getList = async () => {
    try {
      // if (activeNme.value == '1') {
      //   var arrpam: any
      //   const { customName, planOrderCode, greyCode, outShelveName, clothfiyCode } = query
      //   arrpam.customName = customName
      //   arrpam.planOrderCode = planOrderCode
      //   arrpam.greyCode = greyCode
      //   arrpam.outShelveName = outShelveName
      //   arrpam.clothfiyCode = clothfiyCode
      //   arrpam.page = 1
      //   arrpam.size = 10
      // }

      loadingElplus.value = true
      let { code, data, message } = await post({
        url:
          activeNme.value == '1'
            ? 'wms/GreyStock/getPage'
            : activeNme.value == '2'
            ? 'wms/GreyStock/getPageTotal'
            : activeNme.value == '3'
            ? 'wms/GreyStock/getPage'
            : 'wms/GreyStockAdjust/getPage',
        data: query,
      })
      if (code && code == 200) {
        pageData.dataList = data.list
        if (activeNme.value == '1') {
          setTableTotalRow(gridOption, data.list, ['weight'])
        } else if (activeNme.value == '2') {
          setTableTotalRow(gridOption1, data.list, ['horseNum', 'weight'])
        } else if (activeNme.value == '3') {
          setTableTotalRow(gridOption2, data.list, ['weight'])
        } else if (activeNme.value == '4') {
          setTableTotalRow(gridOption3, data.list, ['weight'])
        }
        pageData.total = data.total
        //   ElMessage({
        //     type: 'success',
        //     message: '创建成功',
        //   })
        loadingElplus.value = false
        return
      }
      pageData.dataList = []
      ElMessage.error(message)
    } catch {
      pageData.dataList = []
    } finally {
      loadingElplus.value = false
    }
  }

  //初始化
  onMounted(() => {
    updateGridState01()
    updateGridState02()
    updateGridState03()
    updateGridState04()
    getList()
  })
  const { saveGridState: saveGridState01, updateGridState: updateGridState01 } =
    saveOrUpdateGridState01('SecondaryClothWarehouseStorage-1', gridOption, colState, tableColumns)
  const onColumnMoved = () => {
    saveGridState01()
  }
  const onColumnResized = () => {
    saveGridState01()
  }
  const onColumnVisible = () => {
    saveGridState01()
  }
  const { saveGridState: saveGridState02, updateGridState: updateGridState02 } =
    saveOrUpdateGridState02(
      'SecondaryClothWarehouseStorage-2',
      gridOption1,
      colState2,
      tableColumns1
    )
  const onColumnMoved2 = () => {
    saveGridState02()
  }
  const onColumnResized2 = () => {
    saveGridState02()
  }
  const onColumnVisible2 = () => {
    saveGridState02()
  }
  const { saveGridState: saveGridState03, updateGridState: updateGridState03 } =
    saveOrUpdateGridState03(
      'SecondaryClothWarehouseStorage-3',
      gridOption2,
      colState3,
      tableColumns
    )
  const onColumnMoved3 = () => {
    saveGridState03()
  }
  const onColumnResized3 = () => {
    saveGridState03()
  }
  const onColumnVisible3 = () => {
    saveGridState03()
  }
  const { saveGridState: saveGridState04, updateGridState: updateGridState04 } =
    saveOrUpdateGridState04(
      'SecondaryClothWarehouseStorage-4',
      gridOption3,
      colState4,
      tableColumns2
    )
  const onColumnMoved4 = () => {
    saveGridState04()
  }
  const onColumnResized4 = () => {
    saveGridState04()
  }
  const onColumnVisible4 = () => {
    saveGridState04()
  }
</script>
<script lang="ts">
  export default defineComponent({
    name: 'Blastclothstorage',
  })
</script>
<style scoped>
  .contioner {
    height: 100%;
  }

  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }
</style>
